<template>
    <div class="nav-header">
            <div class="container">
            <div class="nav-header-left">
                <h1 class="logo"><a href="/" title="旅行者">旅行者</a></h1>
            </div>
            <div class="nav-header-right">
                <div class="header-search">
                    <div class="search-input-box">
                        <input v-model="keyword" class="search-input" type="text" placeholder="请输入关键字" v-on:blur="handleSearchInputBlur()" v-on:focus="handleSearchInputFocus()"/>
                    </div>
                    <ul class="search-result" v-if="showSearchResult">
                        <li class="search-item border-bottom" @mouseleave="handleSearchResultMouseLeave()" @mouseover="handleSearchResultMouseOver()" @click="handleSearchResultClick(item)" v-for="item of searchData" :key="item.id">{{ item.name }}</li>
                        <li class="search-item border-bottom" v-show="searchData.length === 0">没有找到匹配数据</li>
                    </ul>
                </div>
                <div class="header-rate">
                </div>
                <div class="header-ad-banner">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { autoSearch } from "../api/comm";
    import router from "../router";
    export default {
        name: "nav-header",
        data() {
            return {
                keyword: '',
                timer: null,
                searchData: [],
                searchInputBlur: true,
                searchResultHover: false
            }
        },
        watch: {
            keyword() {
                if (this.timer) {
                    clearTimeout(this.timer)
                }

                if (!this.keyword) {
                    this.searchData = []
                    return
                }

                this.timer = setTimeout(() => {
                    const result = [];
                    autoSearch(this.keyword).then(res => {
                        this.searchData = res;
                    });
                    this.searchData = result

                    console.log(111)
                }, 300)


            }
        },
        computed: {
            showSearchResult() {
                if (this.searchInputBlur && !this.searchResultHover) {
                    return false;
                }

                if (this.keyword) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        methods: {
            handleSearchResultClick(item) {
                if (item.type_id === 1) {
                    router.push('/tourist/detail/' + item.id);
                } else {
                    router.push('/food/detail/' + item.id);
                }
            },
            handleSearchInputBlur() {
                this.searchInputBlur = true;
            },
            handleSearchInputFocus() {
                this.searchInputBlur = false;
            },
            handleSearchResultMouseOver() {
                this.searchResultHover = true;
            },
            handleSearchResultMouseLeave() {
                this.searchResultHover = false;
            }
        }

    }
</script>

<style lang="scss">
    .nav-header {
        width: 100%;
        .container {
            min-width: 1200px;
            width: 1200px;
            margin: 0 auto;
            height: 94px;
            position: relative;
            .nav-header-left {
                float: left;
                width: 252px;
                height: 94px;
                overflow: hidden;
                position: relative;
                z-index: 1;
            }

            .nav-header-right {
                float: right;
                width: 948px;
                margin-top: 16px;
                position: relative;
                z-index: 99;
                .search-input-box {
                    width: 480px;
                    height: 42px;
                    border: 2px solid #2064c8;
                    border-radius: 5px 0 0 5px;
                    display: inline-block;
                    position: absolute;
                    padding-left: 16px;
                    .search-input {
                        display: inline-block;
                        width: 100%;
                        height: 20px;
                        border: 0;
                        margin-top: 11px;
                        font-size: 14px;
                        color: #9e9e9e;
                    }
                }
                .search-result {
                    border-bottom: 1px solid rgb(0, 208, 212);
                    position: absolute;
                    top: 45px;
                    background: #fff;
                    z-index: 9001;
                    width: 497px;
                    border: 1px solid #2064c8;
                    border-top: 0;
                    border-bottom: 0;
                    overflow: hidden;
                    li {
                        height: 26px;
                        line-height: 26px;
                        font-size: 12px;
                        color: #616161;
                        padding-left: 12px;
                        cursor: pointer;
                        z-index: 99999999;
                        &:hover {
                            background: rgba(0,188,212,0.12);
                        }
                    }
                }
            }
        }
    }
</style>
